<template>
  <!-- 催收执行页-历史信息模块-录音历史 -->
  <section class="component light-channel-sending-record">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @handleResetForm="handleResetForm" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="发送时间" prop="recordTime">
          <el-date-picker :editable="false" placeholder="请选择日期" type="daterange" v-model="searchModel.recordTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="leaveCaseFlag">
          <el-select clearable placeholder="请选择" v-model="searchModel.leaveCaseFlag">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="leaveCaseFlag">
          <el-select clearable placeholder="请选择" v-model="searchModel.leaveCaseFlag">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box :data="dataSet" :height="200" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="行动流水" prop="liushui"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="发送时间" prop="recordStartTime"></el-table-column>
        <el-table-column label="类型" prop="callType" :formatter="(row) => $filter.dictConvert(row.callType, 'CallType')" :min-width="$helper.getColumnWidth(3)" ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="发送内容" prop="targetPhone"></el-table-column>
        <el-table-column label="状态" prop="phoneStatus" :formatter="(row) => $filter.dictConvert(row.phoneStatus, 'PhoneStatus')" :min-width="$helper.getColumnWidth(4)" ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="发送人" prop="remark"></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    NumberRange
  }
})
export default class LightChannelSendingRecord extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private searchModel: any = {
    recordTime: [],
    callDuration: {
      max: "",
      min: ""
    },
    personalName: "",
    targetName: "",
    targetPhone: ""
  };
  private dataSet: any[] = [];

  /**
   * 范围组件数据重置
   */
  private handleResetForm() {
    this.searchModel.callDuration = { min: "", max: "" };
  }

  //获取录音历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.caseOperatorPageService
      .caseTelRecord(this.searchModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less">
</style>